   .part1{
            width: 100%;
            height: 900px;
            background: url("../img/QQ1.jpg");
            overflow: hidden;
        }
        .ding{
            position: absolute;
            right: 10px;
            top: 35px;
        }
        .part1 a{
            margin-right: 50px;
            text-decoration: none;
            font-size: 20px;
            color:rgb(68, 67, 67);
        }
    .img{
            width: 170px;
            height: 170px;
            border-radius: 50%;
            margin-top: 480px;
            margin-left: 120px;
            transition: all 3s;
        }
        .img:hover{  
            transform: rotate(360deg);  
        } 
    .t1{
            color:white;
            font-size: 30px;
            margin-left: 140px;
        }
    .t2{
            color:white;
            font-weight: bold;
            font-size: 130px;
            position: absolute;
            top:-40px;
            left: 500px;
            font-family:STKaiti;
            font-style: italic;
            font-variant: small-caps;
        }
    .top1{
            width: 1100px;
            height: 50px;
            position: absolute;
            top: 400px;
            right: 130px;
        }
        .container span {
            display: inline-block;
            color:white;
            font-size: 85px;
        }    
        .container span {
            animation: sideSlide 5s forwards infinite;
            transform: translateX(-100vw) scale(0);
            filter: opacity(0);
            animation-delay: calc((var(--n) - 1) * 0.1s);
        }                
        @keyframes sideSlide {
            15%, 20% {
                transform: translateX(0.5em) scale(1);
                color:rgb(172, 237, 248);
            }
         
            24% {
                transform: translateX(0) scale(1.2);
                color:  rgb(169, 163, 241);
            }       
            25%, 75% {
                transform: translateX(0) scale(1);
                filter: opacity(1);
                color: rgb(250, 248, 250);
            }    
            90%, 100% {
                transform: translateX(100vw) scale(0);
                filter: opacity(0);
            }
        }
        .container span:nth-child(1) { --n: 1; }
        .container span:nth-child(2) { --n: 2; }
        .container span:nth-child(3) { --n: 3; }
        .container span:nth-child(4) { --n: 4; }
        .container span:nth-child(5) { --n: 5; }
        .container span:nth-child(6) { --n: 6; }
        .container span:nth-child(7) { --n: 7; }
        .container span:nth-child(8) { --n: 8; }
        .container span:nth-child(9) { --n: 9; }
        .container span:nth-child(10) { --n: 10; }
        .container span:nth-child(11) { --n: 11; }
        .container span:nth-child(12) { --n: 12; }
        .container span:nth-child(13) { --n: 13; }
        .container span:nth-child(14) { --n: 14; } 
        .container span:nth-child(15) { --n: 15; }
        .container span:nth-child(16) { --n: 16; }
        .container span:nth-child(17) { --n: 17; }
        .container span:nth-child(18) { --n: 18; }
        .container span:nth-child(19) { --n: 19; } 
        .container span:nth-child(20) { --n: 20; }                       
    .top2{
        width: 800px;
        height: 0px;
        border: 2px solid white;
        position: absolute;
        left: 150px;
        opacity: 0.5;
    }
    .t4{
        position: absolute;
        color: white;
        font-size: 30px;
        left: 150px;
    }
    .t1:hover,.t4:hover{
        color:rgb(107, 204, 241);
    }
    